<template>
  <div class="log-container">
    <!-- 日志类型切换 -->
    <div class="log-type-switch">
      <span
        :class="['log-type-item', { active: currentLogType === 'login' }]"
        @click="switchLogType('login')"
      >
        登录日志
      </span>
      <span
        :class="['log-type-item', { active: currentLogType === 'operation' }]"
        @click="switchLogType('operation')"
      >
        操作日志
      </span>
    </div>

    <!-- 登录日志表格 -->
    <el-table
      v-show="currentLogType === 'login'"
      :data="loginLogList"
      border
      style="width: 100%"
    >
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="ip" label="登录IP" />
      <el-table-column prop="loginTime" label="登录时间" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? "成功" : "失败" }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 操作日志表格 -->
    <el-table
      v-show="currentLogType === 'operation'"
      :data="operationLogList"
      border
      style="width: 100%"
    >
      <el-table-column prop="username" label="操作人" />
      <el-table-column prop="operation" label="操作内容" />
      <el-table-column prop="operationTime" label="操作时间" />
      <!-- 其他操作日志相关列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentLogType: "login", // 当前日志类型
      loginLogList: [], // 登录日志数据
      operationLogList: [], // 操作日志数据
    };
  },
  methods: {
    // 切换日志类型
    switchLogType(type) {
      this.currentLogType = type;
      if (type === "login") {
        this.getLoginLogs();
      } else {
        this.getOperationLogs();
      }
    },

    // 获取登录日志
    async getLoginLogs() {
      try {
        // 调用登录日志接口
        const res = await getLoginLogsApi();
        if (res.code === 1) {
          this.loginLogList = res.data;
        }
      } catch (error) {
        console.error("获取登录日志失败:", error);
        this.$message.error("获取登录日志失败");
      }
    },

    // 获取操作日志
    async getOperationLogs() {
      try {
        // 调用操作日志接口
        const res = await getOperationLogsApi();
        if (res.code === 1) {
          this.operationLogList = res.data;
        }
      } catch (error) {
        console.error("获取操作日志失败:", error);
        this.$message.error("获取操作日志失败");
      }
    },
  },
  created() {
    // 初始加载登录日志
    this.getLoginLogs();
  },
};
</script>

<style scoped>
.log-container {
  padding: 20px;
}

.log-type-switch {
  margin-bottom: 20px;
}

.log-type-item {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.log-type-item:hover {
  color: #409eff;
  background-color: #ecf5ff;
}

.log-type-item.active {
  color: #fff;
  background-color: #409eff;
}
</style>
